<template>
	<view class="page">
		<headerinfo></headerinfo>
		<!-- <headertop></headertop> -->
		<!-- <backos></backos> -->
		<view class="title">
			<el-dropdown @command="fabu_handleCommand">
				<view class="notice" style="margin-right: 30px;">
					发文章
					<i class="el-icon-arrow-down"></i>
				</view>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="0" v-if="!form.isMylife">我的草稿</el-dropdown-item>
					<el-dropdown-item command="1">发文章</el-dropdown-item>
					<el-dropdown-item command="2">发图文</el-dropdown-item>
					<el-dropdown-item command="3">发视频</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<span>发布文章</span>
			<span class="text-danger" v-if="form.isMylife">(个人生活)</span>
		</view>
		<view class="form fosjdow" style="width: 60%;z-index: 10;margin: 0 auto;min-height: 75vh;">
			<view class="flex justify-end" style="margin-bottom: 20rpx;">
				<span class="nextBtn" :class="form.title?'active':''" @click="submit(1)" v-if="!form.isMylife" >存草稿</span>
				<span class="nextBtn mx-2" :class="form.title?'active':''" @click="submit()">下一步</span>
			</view>
			<input class="titleBox" type="text" placeholder="请输入标题" :adjust-position="false" v-model="form.title"
				placeholder-style="font-size:38rpx" />
			<editors :content="form.content" @change="editOk"></editors>
		</view>
	</view>
</template>


<script>
	import editors from '../../components/editor.vue'

	export default {
		components: {
			editors
		},
		data() {
			return {
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				form: {
					categoryId: '',
					content: '',
					contentOri: '',
					familyAttenders: ['202301221222205291617014778483441664'],
					familyId: uni.getStorageSync('familyId') ? uni.getStorageSync('familyId')[0] : '',
					htmlArticle: true,
					images: [],
					posterUrl: '',
					isDraft: false,
					location: '',
					systemArticle: false,
					shareToAll: false,
					title: '',
					titleOri: '',
					videoCoverSeconds: '',
					videos: [],
					privacy: 'all',
					isMylife: ''
				},
				isMylife: '',
				familyMemberId: '',
				familyId: '',
				isFromCaogao: false,
				titleOri: '',
			};
		},
		onLoad(e) {
			console.log('e', e)
			if (e && e.data) {
				this.isFromCaogao = true
				this.form = JSON.parse(decodeURIComponent(e.data));
				console.log('form', this.form)
				this.form.isDraftData = true
				this.form.title = this.form.titleOri = this.form.title ? this.form.title : ''
				this.form.familyAttenders = []
				this.form.familyIds = []
				this.form.articleId = this.form.docId
				this.form.content = this.form.contentOri = this.form.content ? this.form.content : ''
				this.form.categoryId = this.form.categoryId ? this.form.categoryId : ''
				if (this.form.images) {
					this.form.images = [...this.form.images]
				} else {
					this.form.images = []
				}
				console.log('fabu onload this.form.videos', this.form.videos);
			}
			if (e.isMylife) {
				this.isMylife = this.form.isMylife = e.isMylife
			}
			if (e.familyMemberId) {
				this.familyMemberId = e.familyMemberId
			}
			if (e.familyId) {
				this.familyId = e.familyId
			}
			console.log(this.familyMemberId)
		},
		mounted() {
		},
		// 2：需要在退出页面的时候销毁这个监听事件
		beforeDestroy() {
		},
		onShow() {
		},
		onUnload() {
		},
		methods: {
			fabu_handleCommand(e) {
				console.log(e)
				if (e == 0) {
					uni.navigateTo({
						url: `/pages/draft/index`
					})
				}else if (e == 1) {
					let url = '/pages/create/article'
					if(this.form.isMylife){
						url = url + '?isMylife=1'
					}
					uni.navigateTo({
						url: url
					})
				} else if (e == 2) {
					let url = '/pages/create/picture'
					if(this.form.isMylife){
						url = url + '?isMylife=1'
					}
					uni.navigateTo({
						url: url
					})
				} else {
					let url = '/pages/create/video'
					if(this.form.isMylife){
						url = url + '?isMylife=1'
					}
					uni.navigateTo({
						url: url
					})
				}
			},
			editOk(res) {
				this.form.content = res;
			},
			submit(type) {

				if (this.form.title == '') {
					return this.$Show.show('请填写标题')
				}
				if (type == 1) {
					this.form.isDraft = true
					console.log('草稿保存参数:',this.form);
					this.$api.upsertArticle(this.form).then(res => {
						this.$Show.show('草稿保存成功')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/draft/index'
							})
						}, 1000)
					})
				} else {
					if (this.form.content == '') {
						return this.$Show.show('请填写内容')
					}
					setTimeout(() => {
						let data = encodeURIComponent(JSON.stringify(this.form));
						uni.navigateTo({
							url: `/pages/create/articlenext?data=${data}&familyMemberId=${this.familyMemberId}&familyId=${this.familyId}`
						});
					}, 500);
				}
			},
			uploadImg(url) {
				this.form.images.push(url);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.title {
		width: 60%;
		margin: 20px auto;
		font-size: 42rpx;
	}

	.page {
		background-color: #fff;

		.fosjdow {
			box-shadow: 0 0 3px #ccc;
			border-radius: 20rpx;
		}

		.form {
			padding: 0 30rpx;
			padding-top: 30rpx;
			box-sizing: border-box;
			position: relative;

			.titleBox {
				height: 80rpx;
				font-size: 38rpx;
				font-weight: bold;
				border-bottom: 1px solid #f8f8f8;
				text-align: center;
			}

			.nextBtn {
				padding: 18rpx 34rpx;
				border-radius: 10rpx;
				background-color: #d4d4d4;
				color: #fff;
				font-size: 28rpx;
				cursor: pointer;
				z-index: 100000;

			}

			.active {
				background-color: #de4849;
				color: #fff;
			}
		}
	}
</style>